<template>
  <div>
    <p class="titleView" v-if="userName">{{userName.replace('hft_','')}}的学习历史</p>
    <loading-view ref="loading" :data="courseList">
      <van-list v-model="loading"
                :offset="offset"
                :finished="finished"
                @load="getHistory(false)">
        <div>
          <div class="courseView">
            <div class="itemView" v-for="(el, idx) in courseList">
              <history-cell :data="el"></history-cell>
            </div>
          </div>
        </div>
      </van-list>


    </loading-view>
  </div>
</template>

<script>

  import LoadingView from '@/components/LoadingView'
  import HistoryCell from './components/HistoryCell'
  import TeamAPI from '@/repo/api/TeamAPI'
  import UserAPI from "../../../../repo/api/UserAPI";

  export default {
    name: "user-history",
    data() {
      return {
        courseList: null,
        nextPage: "",///下一次请求的页码
        loading: false,//数据加载中
        finished: false,///所有数据加载完成，没有更多
        offset: 10,
        userName: '',
      }
    },
    components: {
      HistoryCell,
      LoadingView
    },
    mounted() {
      this.getHistory(true)
    },
    methods: {
      getHistory(isRefresh) {

        UserAPI.getTargetUserInfo(this.$route.params.userId).then(response => {
          this.userName = response.responseData.nickname;
        })



        this.loading = true
        if (isRefresh) {
          this.nextPage = ""
        }
        TeamAPI.getMemberHistory(this.$route.params.userId, this.nextPage, 6).then((res) => {
          let list = res.responseData.list
          this.nextPage = res.responseData.page
          this.finished = list.length === 0

          if (isRefresh) {
            this.courseList = list
          } else {
            this.courseList = this.courseList.concat(list)
          }

        }).catch(() => {
          this.$refs.loading.showError()
        }).finally(() => {
          this.loading = false
        })


      }
    }
  }
</script>

<style scoped>
  .courseView {
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }

  .courseView :nth-child(2n) {
    margin-right: 0px;
  }

  .itemView {
    width: calc((100% - 16px) / 2);
    margin-right: 16px;
    margin-bottom: 16px;
  }

  .titleView{
    margin: 16px 0 16px 16px;
    font-weight: bold;
    color: #1DA1F2;
    word-break: break-all;
  }
</style>
